<template>
  <div class="page-container">
    <!-- Header -->
    <header class="header">确认订单</header>

    <div class="pb-20">
      <!-- Delivery Address -->
      <div class="bg-white p-4 mb-4">
        <h5 class="text-sm text-gray-600 mb-3">订单配送至：</h5>
        <div class="flex items-center justify-between mb-2 cursor-pointer hover:bg-gray-50 p-2 rounded">
          <p class="text-gray-800">沈阳市浑南区智慧四街1-121号</p>
          <i class="fas fa-chevron-right text-gray-400"></i>
        </div>
        <p class="text-gray-600 text-sm px-2">习近平先生 13656785432</p>
      </div>

      <!-- Business Name -->
      <div class="px-4 py-2">
        <h3 class="text-lg font-semibold text-gray-800">万家饺子（软件园E18店）</h3>
      </div>

      <!-- Order Items -->
      <div class="bg-white mb-4">
        <div
            v-for="item in orderItems"
            :key="item.id"
            class="flex items-center justify-between p-4 border-b border-gray-100 last:border-b-0"
        >
          <div class="flex items-center space-x-3">
            <img :src="item.image" :alt="item.name" class="w-12 h-12 rounded object-cover">
            <p class="text-gray-800">{{ item.name }} x {{ item.quantity }}</p>
          </div>
          <p class="text-gray-800 font-medium">¥{{ item.price }}</p>
        </div>

        <!-- Delivery Fee -->
        <div class="flex items-center justify-between p-4 border-t border-gray-100">
          <p class="text-gray-600">配送费</p>
          <p class="text-gray-800">¥3</p>
        </div>
      </div>
    </div>

    <!-- Total and Pay Button -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
      <div class="flex items-center justify-between">
        <div class="text-2xl font-bold text-red-500">
          ¥{{ totalAmount }}
        </div>
        <button
            @click="goToPayment"
            class="bg-green-500 hover:bg-green-600 text-white px-8 py-3 rounded-lg font-medium transition-colors"
        >
          去支付
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

import sp01 from '@/assets/sp/sp01.png'
import sp02 from '@/assets/sp/sp02.png'

const router = useRouter()

const orderItems = ref([
  {
    id: 1,
    name: '纯肉鲜肉水饺',
    quantity: 2,
    price: 18,
    image: sp01
  },
  {
    id: 2,
    name: '玉米鲜肉水饺',
    quantity: 1,
    price: 20,
    image: sp02
  }
])

const deliveryFee = 3

const totalAmount = computed(() => {
  const itemsTotal = orderItems.value.reduce((sum, item) => sum + (item.price * item.quantity), 0)
  return itemsTotal + deliveryFee
})

const goToPayment = () => {
  router.push('/payment')
}
</script>